<template>
  <!--  leaflet地图 -->
  <div id="map"></div>

  <!-- 信息框组 -->
  <transition name="slide-left">
    <div
      class="dataBoxList-left"
      v-show="dataBoxShow"
      :style="{
        'margin-top': mapTop,
      }"
    >
      <div
        class="dataBox"
        v-for="(data, index) in dataList"
        :key="index"
        v-show="index < 4"
      >
        <div class="title">{{ data.name }}</div>
        <div>
          <div class="introduction">
            <p>主导产业: {{ data.main }}</p>
            <p>面积:{{ data.area }}公顷</p>
          </div>
        </div>
      </div>
    </div>
  </transition>

  <transition name="slide-right">
    <div
      class="dataBoxList-right"
      v-show="dataBoxShow"
      :style="{
        'margin-top': mapTop,
      }"
    >
      <div
        class="dataBox"
        v-for="(data, index) in dataList"
        :key="index"
        v-show="index > 3"
      >
        <div class="title">{{ data.name }}</div>
        <div>
          <div class="introduction">
            <p>主导产业: {{ data.main }}</p>
            <p>面积:{{ data.area }}公顷</p>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
/* eslint-disable */
import { getCurrentInstance, onMounted, ref } from "vue";
import * as esri from "esri-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "leaflet.echarts-layer";
import "@/api/leaflet-echarts.js";
import "@/api/echarts.source.js";
import * as echart from "echarts";
import pubsub from "pubsub-js";

import defaultIcon from "leaflet/dist/images/marker-icon.png";
import chartOptions from "@/api/chartsOption.js";
import 区界取反 from "@/GIS-json/区界取反.json";
import BlockList from "@/GIS-json/产业区块.json";
import BlockData from "@/json/区块信息.json";

export default {
  name: "园区地图",
  data() {
    return {
      subList: [],
      dataBoxShow: true,
      dataList: [],
      mapID: 0,
      mapTop: "0%",
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    let map2;

    let chartMap;

    let interval;

    onMounted(() => {
      console.log(BlockList);
      // 初始化地图对象
      initMap();
      // 添加掩膜
      addMask();
      // 绘制产业园区面
      drawBlock();
      // 展示产业园区信息
      dataShow();
      // pubsub订阅
      subscribeList();
    });

    // 初始化地图
    function initMap() {
      // 地图初始化,1
      map2 = L.map("map", {
        preferCanvas: true, // 制图canvas优先显示
        attributionControl: false, // 隐藏信息控件
        zoomControl: false, // 隐藏缩放控件
        maxZoom: 13,
        minZoom: 11,
      });
      map2.dragging.disable();
      map2.scrollWheelZoom.disable();

      // 地图视图定位
      map2.setView([22.74, 113.51], 8);
      setTimeout(() => {
        map2.setView([22.74, 113.51], 12);
      }, 500);

      // 添加深色底图为初始底图
      L.tileLayer(
        "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
      ).addTo(map2);

      // 图标初始化
      let size = 25;
      const DefaultIcon = L.icon({
        iconUrl: defaultIcon,
        iconSize: [size, size],
      });
      L.Marker.prototype.options.icon = DefaultIcon;

      map2.on("click", (e) => {
        console.log(e.latlng);
      });
    }

    // 添加区界掩膜
    function addMask() {
      // 坐标XY转置
      区界取反.features[0].geometry.rings.forEach((element) => {
        let rings = [];
        element.forEach((e) => {
          if (e[0] > 100) {
            rings.push(e.reverse());
          } else {
            rings.push(e);
          }
        });
        // 绘制面要素
        L.polygon(rings, {
          color: "rgba(18, 33, 43, 0.9)",
          weight: 0,
          fillOpacity: 0.95,
          opacity: 1,
        }).addTo(map2);
      });
    }

    // 绘制产业园区
    function drawBlock() {
      // 绘制
      BlockList.features.forEach((element) => {
        addPolygon(element, "rgb(183, 244, 175)", 0.4, 3);
      });
    }

    // 添加面要素
    function addPolygon(element, color, opacity, border, fillColor = color) {
      element.geometry.rings.forEach((ring) => {
        // 坐标微调
        let rings = [];
        ring.forEach((point) => {
          rings.push([point[1] - 0.003, point[0] + 0.005]);
        });
        // 绘制面要素
        L.polygon(rings, {
          color: color,
          fillOpacity: opacity ? opacity : 1,
          weight: border ? border : 0,
          opacity: 1,
          fillColor: fillColor,
        }).addTo(map2);
      });
    }

    // 展示产业园区信息
    function dataShow() {
      // mapInterval();
      console.log(BlockData);
      interval = setInterval(mapInterval(), 5000);
    }

    // 地图轮播
    function mapInterval() {
      // 区块信息显隐
      proxy.dataBoxShow = false;
      setTimeout(() => {
        proxy.dataBoxShow = true;
      }, 300);
      // 区块信息填入
      proxy.dataList = [];
      for (
        let i = proxy.mapID * 8;
        i === proxy.mapID * 8 ||
        (i > proxy.mapID * 8 && i < (proxy.mapID + 1) * 8);
        i++
      ) {
        proxy.dataList.push({
          name: BlockData[i]["区块名"],
          main: BlockData[i]["主导产业"],
          area: Number(BlockData[i]["园区面积（公顷）"]).toFixed(2),
        });
      }
      // console.log(proxy.dataList);

      // 去除旧图表地图
      if (chartMap != undefined) {
        chartMap.dispose();
      }

      // 加载新图表地图
      chartMap = drawEcharts(chartOptions["图表地图-园区" + proxy.mapID]);

      // 信息栏高度
      switch (proxy.mapID) {
        case 0:
          proxy.mapTop = "0%";
          break;
        case 1:
          proxy.mapTop = "10%";
          break;
        case 2:
          proxy.mapTop = "20%";
          break;
      }

      proxy.mapID === 2 ? (proxy.mapID = 0) : proxy.mapID++;

      return mapInterval;
    }

    //绘制图表地图
    function drawEcharts(option) {
      var overlay = new L.echartsLayer(map2, echarts);
      var chartsContainer = overlay.getEchartsContainer();
      var myChart = overlay.initECharts(chartsContainer);
      window.onresize = myChart.onresize;
      overlay.setOption(option);
      return myChart;
    }

    //  pubsub订阅
    function subscribeList() {
      proxy.subList.push(
        pubsub.subscribe("routerChange", (n, data) => {
          // 去除旧图表地图
          if (chartMap != undefined) {
            chartMap.dispose();
          }
          clearInterval(interval);
        })
      );
    }

    return {};
  },
  beforeUnmount() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
* {
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
  z-index: 999;
}

.dataBoxList-left {
  position: absolute;
  top: 0%;
  left: 1%;
  z-index: 999;
  height: 100%;
  width: 20%;
}

.dataBoxList-right {
  position: absolute;
  top: 0%;
  right: 1%;
  z-index: 999;
  height: 100%;
  width: 20%;
  text-align: right;
  > * {
    display: inline-block;
  }
}

.dataBoxList-bottom {
  position: absolute;
  bottom: 0%;
  left: 18%;
  z-index: 999;
  height: 34.25%;
  width: 40%;
  > * {
    display: inline-block;
    margin-right: 4%;
    margin-bottom: 1% !important;
  }
  > .dataBox:nth-child(10) {
    margin-right: 60%;
  }
}

.dataBoxList-top {
  position: absolute;
  top: 0%;
  right: 0%;
  z-index: 999;
  height: 25.5%;
  width: 35%;
  > * {
    margin-bottom: 3% !important;
  }
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s;
}
.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
}
.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(100%);
}

.dataBox {
  margin-bottom: 5%;
  border-radius: 7px;
  // width: 80%;
  width: 320px;
  border: rgb(183, 244, 175) 1px solid;
  > .title {
    font-weight: bold;
    font-size: 150%;
    padding: 5px 50px;
    padding-left: 10px;
    background-color: rgb(183, 244, 175);
    color: black;
    text-align: left;
  }
  > div {
    > .introduction {
      background-color: rgb(18, 33, 43);
      color: white;
      font-size: 120%;
      text-align: left;
      padding: 3%;
    }
  }
}
</style>